<template>
<!-- 订单管理 -->
  <div>
    <el-card>
      <div slot="header">
          <el-form :inline="true" :model="orderForm" size="mini">
            <el-form-item label="订单号">
              <el-input v-model="orderForm.orderNo" placeholder="订单号"></el-input>
            </el-form-item>
            <el-form-item label="收货人">
              <el-input v-model="orderForm.consignee" placeholder="收货人"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="orderForm.phone" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item label="订单状态">
              <el-select v-model="orderForm.orderState" placeholder="订单状态">
                <el-option label="已受理" value="已受理"></el-option>
                <el-option label="派送中" value="派送中"></el-option>
                <el-option label="已完成" value="已完成"></el-option>
              </el-select>
            </el-form-item>
            <br>
            <el-form-item label="选择时间">
                <el-date-picker
                   v-model="orderForm.date"
                   type="datetimerange"
                   :picker-options="pickerOptions"
                   range-separator="至"
                   start-placeholder="开始日期"
                   end-placeholder="结束日期"
                   value-format="yyyy-MM-dd HH:mm:ss "
                   align="right">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSearOrder">查询</el-button>
            </el-form-item>
          </el-form>
      </div>
      <div class="centent">
          <el-table :data="tableData" border :style="{width: w+'px'}">
            <el-table-column fixed prop="orderNo" label="订单号" width="180">
              </el-table-column>
              <el-table-column prop="orderTime" label="下单时间" width="180">
                <template slot-scope="scope">
                    <span>
                      {{scope.row.orderTime | formatDateTime}}
                    </span>
                </template>
              </el-table-column>
              <el-table-column prop="phone" label="手机号" width="220">
              </el-table-column>
              <el-table-column prop="consignee" label="收货人"  width="120">
              </el-table-column>
              <el-table-column prop="deliverAddress" label="配送地址" width="280">
              </el-table-column>
              <el-table-column  prop="deliveryTime" label="送达时间" width="180">
                <template slot-scope="scope">
                    <span>
                      {{scope.row.deliveryTime | formatDateTime}}
                    </span>
                </template>
              </el-table-column>
              <el-table-column  prop="remarks" label="用户备注" width="320">
              </el-table-column>
              <el-table-column  prop="orderAmount" label="订单金额" width="120">
              </el-table-column>
              <el-table-column  prop="orderState" label="订单状态" width="140">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="scope">
                      <el-button type="text" size="small"   @click="lookClick(scope.row.id)">查看</el-button>
                      <el-button  @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                  </template>
              </el-table-column>
          </el-table>
          <!-- 分页 -->
           <el-pagination
             @current-change="handleCurrentChange"
             :current-page="currentPage"
             :page-size="pageSize"
             layout="total,  prev, pager, next, jumper"
             :total="total">
           </el-pagination>

           <!-- 编辑 抽屉-->
          <el-drawer title="编辑订单" :visible.sync="drawer" size='35%'  >
                <el-form  label-width="80px" :model="editOrderForm"  size="mini" ref="editOrderForm"  :rules="rules">
                  <el-form-item label="订单号">
                    <span>{{editOrderForm.orderNo}}</span>
                  </el-form-item>
                  <el-form-item label="下单时间">
                    <span>{{orDerTime(editOrderForm.orderTime)}}</span>
                  </el-form-item>
                  <el-form-item label="手机号"  prop="phone">
                    <el-input v-model="editOrderForm.phone" maxlength="11"></el-input>
                  </el-form-item>
                  <el-form-item label="收货人" prop="consignee">
                    <el-input v-model="editOrderForm.consignee"></el-input>
                  </el-form-item>
                  <el-form-item label="配送地址" prop="deliverAddress">
                    <el-input v-model="editOrderForm.deliverAddress"></el-input>
                  </el-form-item>
                  <el-form-item label="送达时间" width="100%"  prop="deliveryTime">
                      <el-date-picker
                           v-model="editOrderForm.deliveryTime"
                           type="datetime"
                           placeholder="选择日期时间"
                           align="right"  
                           :picker-options="pickerOptions2"
                           value-format="yyyy-MM-dd HH:mm:ss"
                            
                           >
                  </el-date-picker>
                  </el-form-item>
                  <el-form-item label="用户备注"   prop="remarks">
                    <el-input v-model="editOrderForm.remarks"></el-input>
                  </el-form-item>
                  <el-form-item label="订单金额" prop="orderAmount">
                    <el-input v-model="editOrderForm.orderAmount"></el-input>
                  </el-form-item>
                  <el-form-item label="订单状态"  prop="orderState">
                    <el-input v-model="editOrderForm.orderState"></el-input>
                  </el-form-item>

                   <el-form-item>
                       <el-button type="success" @click="submitForm">保存</el-button>
                      <el-button @click="drawer=false">取消</el-button>
                   </el-form-item>
                </el-form>
          </el-drawer>

          <!-- 查看 抽屉 -->
                    <el-drawer title="查看订单" :visible.sync="drawer2" size='35%'  >
                <el-form  label-width="80px" :model="editOrderForm2"  size="mini" ref="editOrderForm"  >
                  <el-form-item label="订单号"> <span>{{editOrderForm2.orderNo}}</span></el-form-item>
                  <el-form-item label="下单时间"><span>{{orDerTime(editOrderForm2.orderTime)}}</span> </el-form-item>
                  <el-form-item label="手机号"><span>{{editOrderForm2.phone}}</span> </el-form-item>
                  <el-form-item label="收货人"> <span>{{ editOrderForm2.consignee}}</span> </el-form-item>
                  <el-form-item label="配送地址"><span>{{editOrderForm2.deliverAddress }}</span></el-form-item>
                  <el-form-item label="送达时间" ><span>{{orDerTime(editOrderForm2.deliveryTime)}}</span> </el-form-item>
                  <el-form-item label="用户备注" ><span>{{editOrderForm2.remarks}}</span> </el-form-item>
                  <el-form-item label="订单金额"><span>￥{{editOrderForm2.orderAmount}}</span></el-form-item>
                  <el-form-item label="订单状态"><span>{{editOrderForm2.orderState}}</span></el-form-item>
                </el-form>
          </el-drawer>

      </div>
    </el-card>
  </div>
</template>

<script>
import {orderList,orderEdit,orderEetail} from '@/api/order'
import dayjs from "dayjs"
export default {
  data(){
    return{
        orderForm:{//表单数据//头部表单信息
        orderNo:'',//订单号
        consignee:"",//收货人
        phone:"",//手机号
        orderState:"",//订单状态
        date:[],//选择时间
              },
      editOrderForm:{},//编辑订单的数据
      editOrderForm2:{},//查看订单的数据
      searchParams:{},//搜索参数
      tableData:[],//表格的数据
      w:document.body.clientWidth-300,
      currentPage:1,//分页当前页
      total:0,//总条数
      pageSize:5,//当前页显示条数
      drawer:false,//编辑 抽屉
      drawer2:false,//查看 抽屉
      pickerOptions: {//下单日期选择-自定义快捷键
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
      },
       pickerOptions2: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
      },
       //验证规则
      rules: {
        //手机号
        phone : [// message  提示输入手机号
          { required: true, message: "请输入手机号", trigger: "blur" }, ],
        //收货人
        consignee :[
          // message  提示输入收货人
          { required: true, message: "请输入收货人姓名", trigger: "blur" },],
        //配送地址
        deliverAddress:[
          // message  提示输入配送地址
          { required: true, message: "请输入配送地址", trigger: "blur" },],
        //送达时间
        deliveryTime:[
          // message  提示输入送达时间
          { required: true, message: "请输入送达时间", trigger: "blur" },],
        //用户备注
        remarks:[
          // message  提示输入用户备注
          { required: true, message: "请输入用户备注", trigger: "blur" },],
        //订单金额
        orderAmount:[
          // message  提示输入订单金额
          { required: true, message: "请输入订单金额", trigger: "blur" },],
        //订单状态
        orderState:[
          // message  提示输入订单状态
          { required: true, message: "请输入订单状态", trigger: "blur" },],

       }
    }
  },
  //方法
  methods:{
    //加载数据
      async loadData(){
      //...this.searchParams,展开定义成浅拷贝
      let res =  await orderList({currentPage:this.currentPage,pageSize:this.pageSize,...this.searchParams,});//请求参数必须有 当前页码 和 每页条数
      // console.log(res);//当前页面的订单信息
      let {total,data}=res;
      this.total=total;//总页数
      this.tableData=data;//表格的数据
      
    },
    // 查询
    onSearOrder(){
      // console.log(this.orderForm);
      this.searchParams={...this.orderForm};//浅拷贝解决地址问题,把值放在...this.searchParams里面
      this.searchParams.date=JSON.stringify(this.searchParams.date)//处理时间格式
      this.currentPage=1;//把开始搜索,从第一页开始,解决搜索之后,开始页变为多页,搜索为空的bug
      this.loadData();
    },
    //触发事件
    resizeHandle(){
      this.w=document.body.clientWidth-300;//resize--窗口大小改变事件
    },
    //当前页发生改变
    handleCurrentChange(val){
      // console.log(val);  //打印显示具体哪个页面
      this.currentPage=val; //当前页重新赋值
      this.loadData(); //刷新页面数据
    },
    //抽屉保存
    async submitForm(){
      // console.log(this.editOrderForm)//查看订单的编辑信息
      //1.处理下单时间 格式 :2222-22-22T  "2022-03-16 22:05:06"
      //1.处理送达时间  value-format="yyyy-MM-ddTHH:mm:ss.000Z"
      this.editOrderForm.deliveryTime=dayjs(this.editOrderForm.deliveryTime).format("YYYY/MM/DD HH:mm:ss")
      this.editOrderForm.orderTime=dayjs(this.editOrderForm.orderTime).format("YYYY/MM/DD HH:mm:ss")

        //2.时间符合后端格式发送ajax
        this.$refs.editOrderForm.validate(async (valid) => {
        //点击提交按钮  找到表单  用validate()方法  表单都有值就是true
          let res = await orderEdit(this.editOrderForm)
          let {code,msg}=res;
        if (valid) {
          // console.log(res);//修改商品的数据
          if(code===0){
            this.$message({
              type:"success",
              message:msg,
            });
            //添加成功隐藏
            this.drawer=false;
            //刷新页面
            this.loadData();
          }else this.$message.error(msg);
          }else this.$message.error("请补全商品信息");
          }
          )

    },
    //编辑订单按钮
    async handleClick(row){
      // console.log(row);
        this.drawer=true;//显示抽屉
        this.editOrderForm={...row};//浅拷贝新地址
      },
    // 查看订单按钮
       async lookClick(id){
        //  console.log(id);//订单的id
        let res = await orderEetail(id)
        //  console.log(res.data);//订单详情


        this.editOrderForm2=res.data;//浅拷贝新地址
        this.drawer2=true;//显示抽屉
      },
    //处理编辑订单的时间
    orDerTime(val){
         return   dayjs(val).format("YYYY-MM-DD HH:mm:ss")
      }
  },
  //生命周期
  created(){
    window.addEventListener("resize",this.resizeHandle);

    this.loadData();//订单列表响应函数

  },
  beforeDestroy(){
    window.removeEventListener("resize",this.resizeHandle);
  },
  //过滤器
  filters:{
    formatDateTime(val){
      return dayjs(val).format("YYYY/MM/DD HH:mm:ss")
    }
  }

 
};
</script>

<style lang="less" scoped>
//分页
.el-pagination{
  margin: 20px 0;
}
  //编辑表单
  .el-form{
    padding:0 40px 0 30px;
  }
</style>